<!--
 * @Author: your name
 * @Date: 2022-03-20 16:31:26
 * @LastEditTime: 2022-04-18 22:31:33
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \react-antd-admin\vue-admin-template\src\views\article\articleList.vue
-->
<template>
  <div>
    <!-- 表格!! -->
    <el-button type="primary"
               size='small'
               @click="toPublishArticle">
      发布文章
    </el-button>
    <el-table v-loading="loading"
              :data="articleData"
              style="width: 100%"
              size="mini"
              @row-click="toDetails">
      <el-table-column type="index"
                       :index="1"
                       label="序号"
                       align="center" />
      <el-table-column label="封面"
                       width="150"
                       align="center">
        <template slot-scope="scope">
          <img :src="scope.row.cover"
               alt=""
               style="width:100%">
        </template>
      </el-table-column>
      <el-table-column label="风采">
        <template slot-scope="scope">
          <div style="font-weight:bold">{{ scope.row.title }}</div>
          <div>{{ scope.row.userInfo && scope.row.userInfo.realname }}</div>
          <div>{{ scope.row.category && scope.row.category.name }}</div>
          {{ moment(scope.row.created_at).format("YYYY-MM-DD") }}
        </template>
      </el-table-column>
      <el-table-column label="状态"
                       align="center"
                       width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === '审核通过'"
                  type="success">{{ scope.row.status }}</el-tag>
          <el-tag v-else-if="scope.row.status === '审核不通过'"
                  type="danger">{{ scope.row.status }}</el-tag>
          <el-tag v-else-if="scope.row.status === '推荐'"
                  type="warning">{{ scope.row.status }}</el-tag>
          <el-tag v-else
                  type="info">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       align="center"
                       width="150px">
        <template slot-scope="scope">
          <el-button-group style="margin: '2px'">
            <el-button type="primary"
                       :disabled="scope.row.status !== '审核通过'&&scope.row.status !== '未审核'"
                       size='mini'
                       @click.stop="toRecommend(scope.row.id,'推荐')">推荐</el-button>
            <el-button type="success"
                       :disabled="scope.row.status !== '未审核'"
                       size='mini'
                       @click.stop="toCheckArticle(scope.row)">审核</el-button>
            <el-button type="info"
                       size='mini'
                       @click.stop="updateArticleById(scope.row)">修改</el-button>
            <el-button type="danger"
                       size='mini'
                       @click.stop="deleteArticleById(scope.row.id)">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-div">
      <el-pagination size="mini"
                     :current-page="params.page"
                     :page-sizes="[2,5,10, 15, 20]"
                     :page-size="params.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" />
    </div>
    <!-- 审核 -->
    <el-dialog class="customer_modal"
               title="审核风采信息"
               :visible.sync="visible"
               width="60%">
      <el-form ref="ruleForm"
               :model="form">
        <el-form-item class="title"
                      style="text-align:center;font-size:18px; line-height:2em">
          {{ article.title }}
        </el-form-item>
        <el-form-item v-html="article.content" />
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="danger"
                   @click="checkHandler(article.id,'审核不通过')">审核不通过</el-button>
        <el-button type="primary"
                   @click="checkHandler(article.id,'审核通过')">审核通过</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAllArticles, checkArticle, deleteArticle, readTime } from '@/api/article'
import moment from 'moment'
export default {
  data() {
    return {
      articleData: [],
      loading: false,
      moment,
      visible: false,
      article: {},
      form: {},
      params: {
        page: 1,
        pageSize: 5
      },
      total: 0
    };
  },
  created() {
    this.queryArticles()
  },
  watch: {
    params: {
      handler() {
        this.queryArticles()
      },
      deep: true
    }
  },
  methods: {
    async queryArticles() {
      this.loading = true
      const res = await getAllArticles({ ...this.params })
      this.loading = false
      this.articleData = res.list
      this.total = res.total
    },
    toPublishArticle() {
      // 跳转页面
      this.$router.push({
        path: '/publishArticle'
      })
    },
    async toDetails(row) {
      const res = await readTime(row.id)
      this.$router.push({
        path: '/articleDetails',
        query: { id: row.id }
      })
    },
    toRecommend(id, status) {
      this.$confirm('你确定要推荐此资讯?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const obj = {
          id,
          status
        }
        const res = await checkArticle(obj)
        this.$message({
          type: 'success',
          message: res.message
        })
        this.queryArticles()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消推荐'
        })
      })
    },
    toCheckArticle(row) {
      this.visible = true
      this.article = row
    },
    updateArticleById(row) {
      this.$router.push({
        path: '/publishArticle',
        query: { id: row.id }
      })
    },
    // 审核
    async checkHandler(id, status) {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          console.log('校验通过！')
          const obj = {
            id,
            status
          }
          const res = await checkArticle(obj)
          // 提示用户保存成功，刷新表格数据并关闭模态框
          this.$notify.success({
            title: '成功',
            message: res.message
          })
          this.queryArticles()
          this.visible = false
        } else {
          return false
        }
      })
    },
    // 通过id删除
    deleteArticleById(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteArticle({ id })
        this.$message({
          type: 'success',
          message: res.message
        })
        this.queryArticles()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /**
     * @description: 分页每页条数发生变化的回调
     * @param {*} val  当前条数值
     * @return {*}
     */
    handleSizeChange(val) {
      this.params.pageSize = val
      this.params.page = 1
    },
    /**
     * @description: 页码发生变化的回调
     * @param {*} val  当前条数值
     * @return {*}
     */
    handleCurrentChange(val) {
      this.params.page = val
    },
  }
};
</script>

<style>
/*标题背景色*/
.customer_modal .el-dialog__header {
  background-color: #4fbc8d;
}
.customer_modal .el-form-item__content {
  text-align: center;
  font-size: 18px;
  line-height: 2em;
}
</style>
